<template>
  <component :is="config.layout.layoutMode"></component>
</template>

<script setup>
import { useConfig } from '@/stores/config'
import { useNavTabs } from '@/stores/navTabs'
import { useSiteConfig } from '@/stores/siteConfig'
// // import { useAdminInfo } from '@/stores/adminInfo'
import { useRouter } from 'vue-router'
import Default from './container/default.vue'
import Classic from './container/classic.vue'
import Streamline from './container/streamline.vue'
import Double from './container/double.vue'
import { onMounted, onBeforeMount } from 'vue'
import { Session } from '@/utils/storage'
// import { index } from '@/api/backend'
import { handleAdminRoute, getFirstRoute, routePush, addRouteItem } from '@/utils/router'
// // import { adminBaseRoute } from '@/router/assets'
import { useEventListener } from 'vueuse/core'
import { BEFORE_RESIZE_LAYOUT } from '@/stores/constant/cacheKey'
// import router from "../../public/assets/router";
// import { isEmpty } from 'lodash-es'
//
const navTabs = useNavTabs()
const config = useConfig()
const router = useRouter()
const siteConfig = useSiteConfig()
// // const adminInfo = useAdminInfo()
//
onMounted(() => {
  // if (!adminInfo.token) return router.push({ name: 'adminLogin' })
  init()
  onSetNavTabsMinWidth()
  useEventListener(window, 'resize', onSetNavTabsMinWidth)
})
onBeforeMount(() => {
  onAdaptiveLayout()
  useEventListener(window, 'resize', onAdaptiveLayout)
})

const init = () => {
  const res = {
    "code": 1,
    "msg": "",
    "time": 1685942611,
    "data": {
      "adminInfo": {
        "id": 1,
        "username": "admin",
        "nickname": "Admin",
        "avatar": "https://demo.buildadmin.com/assets/images/avatar.png",
        "lastlogintime": "2023-06-05 13:23:31",
        "super": true
      },
      "menus": [
        {
          "id": 1,
          "pid": 0,
          "type": "menu",
          "title": "控制台",
          "name": "index",
          "path": "index",
          "icon": "fa fa-dashboard",
          "menu_type": "tab",
          "url": "",
          "component": "/src/views/backend/dashboard.vue",
          "keepalive": "index/index",
          "extend": "none"
        },
        {
          "id": 4,
          "pid": 0,
          "type": "menu_dir",
          "title": "银行列表",
          "name": "bank",
          "path": "bank",
          "icon": "fa fa-group",
          "children": [
            {
              "id": 41,
              "pid": 4,
              "type": "menu",
              "title": "银行列表",
              "name": "bank/list",
              "path": "bank/list",
              "icon": "fa fa-group",
              "menu_type": "tab",
            },
            {
              "id": 42,
              "pid": 4,
              "type": "menu",
              "title": "限流配置",
              "name": "bank/config",
              "path": "bank/config",
              "icon": "fa fa-group",
              "menu_type": "tab",
            }
          ]
        },
        {
          "id": 5,
          "pid": 0,
          "type": "menu_dir",
          "title": "账号管理",
          "name": "account",
          "path": "account",
          "icon": "fa fa-group",
          "menu_type": null,
          "url": "",
          "component": "",
          "keepalive": 0,
          "extend": "none",
          "children": [
            {
              "id": 51,
              "pid": 5,
              "type": "menu",
              "title": "账号列表",
              "name": "account/list",
              "path": "account/list",
              "icon": "fa fa-group",
              "menu_type": "tab",
              "url": "",
              "component": "/src/views/backend/auth/group/index.vue",
              "keepalive": "account/list",
              "extend": "none",
              "children": []
            }, {
              "id": 52,
              "pid": 5,
              "type": "menu",
              "title": "账号明细",
              "name": "account/detail",
              "path": "account/detail",
              "icon": "fa fa-group",
              "menu_type": "tab",
              "url": "",
              "component": "/src/views/backend/auth/group/index.vue",
              "keepalive": "account/detail",
              "extend": "none",
              "children": []
            },
          ]
        }

      ],
      "siteConfig": {
        "siteName": "银行仿真",
        "version": "v1.0.0",
        "cdnUrl": "",
        "apiUrl": "",
        "upload": {
          "maxsize": 10485760,
          "savename": "/storage/{topic}/{year}{mon}{day}/{filesha1}{.suffix}",
          "mimetype": "jpg,png,bmp,jpeg,gif,webp,zip,rar,xls,xlsx,doc,docx,wav,mp4,mp3,txt",
          "mode": "local"
        }
      },
    }
  };
  siteConfig.dataFill(res.data.siteConfig)
  handleAdminRoute(res.data.menus, router)

  /**
   * 后台初始化请求，获取站点配置，动态路由等信息
   */
  // index().then((res) => {
  //     siteConfig.dataFill(res.data.siteConfig)
  //     // terminal.changePort(res.data.terminal.installServicePort)
  //     // terminal.changePackageManager(res.data.terminal.npmPackageManager)
  //     adminInfo.dataFill(res.data.adminInfo)
  //
  //     if (res.data.menus) {
  //         handleAdminRoute(res.data.menus)
  //
  //         // 预跳转到上次路径
  //         if (route.params.to) {
  //             const lastRoute = JSON.parse(route.params.to as string)
  //             if (lastRoute.path != adminBaseRoute.path) {
  //                 let query = !isEmpty(lastRoute.query) ? lastRoute.query : {}
  //                 routePush({ path: lastRoute.path, query: query })
  //                 return
  //             }
  //         }
  //
  //         // 跳转到第一个菜单
  //         let firstRoute = getFirstRoute(navTabs.state.tabsViewRoutes)
  //         if (firstRoute) routePush(firstRoute.path)
  //     }
  // })
}

const onAdaptiveLayout = () => {
  let defaultBeforeResizeLayout = {
    layoutMode: config.layout.layoutMode,
    menuCollapse: config.layout.menuCollapse,
  }
  let beforeResizeLayout = Session.get(BEFORE_RESIZE_LAYOUT)
  if (!beforeResizeLayout) Session.set(BEFORE_RESIZE_LAYOUT, defaultBeforeResizeLayout)

  const clientWidth = document.body.clientWidth
  if (clientWidth < 1024) {
    config.setLayout('menuCollapse', true)
    config.setLayout('shrink', true)
    config.setLayoutMode('Classic')
  } else {
    let beforeResizeLayoutTemp = beforeResizeLayout || defaultBeforeResizeLayout

    config.setLayout('menuCollapse', beforeResizeLayoutTemp.menuCollapse)
    config.setLayout('shrink', false)
    config.setLayoutMode(beforeResizeLayoutTemp.layoutMode)
  }
}

// 在实例挂载后为navTabs设置一个min-width，防止宽度改变时闪现滚动条
const onSetNavTabsMinWidth = () => {
  const navTabs = document.querySelector('.nav-tabs')
  if (!navTabs) {
    return
  }
  const navBar = document.querySelector('.nav-bar')
  const navMenus = document.querySelector('.nav-menus')
  const minWidth = navBar.offsetWidth - (navMenus.offsetWidth + 20)
  navTabs.style.width = minWidth.toString() + 'px'
}
</script>

<!-- 只有在 components 选项中的组件可以被动态组件使用-->
<script>
export default {
  components: { Default, Classic, Streamline, Double },
}
</script>
